<template>
	<view class="content">
		<view style="height: 68rpx;"></view>
		<view v-if="userinfo"  @click="xiugai()"  class="wid90 mar dis disAl" style="height: 184rpx;">
			<image @click="xiugai()" :src="url + '/assets/wechat/setting.png'" class="setting" mode=""></image>
			<view class="hei100 dis disAl disJuC" style="width: 191rpx;">
				<image v-if="userinfo.avatar.indexOf('data:') == -1" :src="ossurl + userinfo.avatar" class="wh100 borRad50"></image>
				<image v-else :src="userinfo.avatar" class="wh100 borRad50"></image>
			</view>
			<view class="mar-left20" style="max-width: 65%;">
				<view class="foSi40 fowe600">{{userinfo.nickname}}</view>
				<view class="foSi35" style="color: #474747;">{{userinfo.mobile}}</view>
			</view>
		</view>
		<view class="wid90 mar borRad10 bacFFF foSi30" style="margin-top: 58rpx;">
			<view class="wid87 mar dis disAl disJuB" 
				style="height: 117rpx;" @click="tiaozhuan('/pages/orderForm/wishingForm')">
				<view>祈福许愿订单</view>
				<uni-icons type="right"></uni-icons>
			</view>
			<view class="wid90 mar xia"></view>
			<view class="wid87 mar dis disAl disJuB" 
				style="height: 117rpx;" @click="tiaozhuan('/pages/orderForm/animalsForm')">
				<view>生日放生订单</view>
				<uni-icons type="right"></uni-icons>
			</view>
			<view class="wid90 mar xia"></view>
			<view class="wid87 mar dis disAl disJuB" 
				style="height: 117rpx;" @click="tiaozhuan('/pages/orderForm/drawLotsForm')">
				<view>每日一拜订单</view>
				<uni-icons type="right"></uni-icons>
			</view>
			<view class="wid90 mar xia"></view>
			<view class="wid87 mar dis disAl disJuB" 
				style="height: 117rpx;" @click="tiaozhuan('/pages/wode/contactUs')">
				<view>联系我们</view>
				<uni-icons type="right"></uni-icons>
			</view>
			<view class="wid90 mar xia"></view>
			<view class="wid87 mar dis disAl disJuB" 
				style="height: 117rpx;" @click="tiaozhuan('/pages/wode/managementCenter')">
				<view>管理中心</view>
				<uni-icons type="right"></uni-icons>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view style="width: 100vw;">
				<view class="bacFFF borRad10 wid90 mar poRel">
					<view style="height: 20rpx;"></view>
					<view class="fowe600 foSi40 textCen">基本信息</view>
					<view v-if="avatar" class="wid90 mar dis disAl disJuB mar-top10">
						<view class="foSi30">头像</view>
						<!-- #ifdef MP-WEIXIN -->
						<button hover-class="none" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
							<image v-if="!avatarTr" :src="avatar"
								style="width: 120rpx;height: 120rpx;" class="borRad50"></image>
							<image v-if="avatarTr" :src="ossurl+avatar"
								style="width: 120rpx;height: 120rpx;" class="borRad50"></image>
						</button>
						<!-- #endif -->
						
						<!-- #ifdef H5 -->
						<image v-if="!avatarTr" :src="avatar" @click="shangImage()"
							style="width: 120rpx;height: 120rpx;" class="borRad50"></image>
						<image v-if="avatarTr" :src="ossurl+avatar" @click="shangImage()"
							style="width: 120rpx;height: 120rpx;" class="borRad50"></image>
						<!-- #endif -->
						
					</view>
					<view class="wid90 mar hei80 dis disAl disJuB mar-top10">
						<view class="foSi30">昵称</view>
						<input type="nickname" class="nickname" v-model="nickname" @change="nicknamChange" placeholder="请输入昵称" />
					</view>
					<view class="wid100 mar-top30">
						<view class="dis disAl disJuC borRad10 coFFF foSi35 hei80 mar" @click="queren()"
							style="width: 300rpx;background-color: #C38D5F;">确认修改</view>
					</view>
					<view style="height: 56rpx;"></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:this.global.url,
				ossurl:this.global.ossurl,
				nickname: '',
				avatar: '',
				userinfo:'',
				identity:0,
				avatarTr: false
			}
		},
		onLoad() {
			this.alioss()
		},
		onShow(){
			var that = this;
			var userinfo = uni.getStorageSync('userinfo')
			that.userinfo = userinfo
			console.log(uni.getStorageSync('userinfo'));
			var mobile = uni.getStorageSync('userinfo').mobile
			if(!mobile){
				that.tiaozhuan('/pages/login/login')
			}else{
				that.identitys();
			}
			if(that.userinfo.avatar.indexOf('data:') == -1){
				this.avatarTr = true
			}
		},
		methods: {
			alioss(){
				var that  = this;
				uni.request({
				    // http://jufeng.tengshuokeji.cn//yonghu/order/order_comments
				    url: that.global.url + '/api/index/alioss',
				    method: "POST",
				    data: {},
				    success(res) {
				        let result = res.data
				        console.log(result)
				        if (result.code == 1) {
				            that.global.ossurl = result.data
							console.log(that.global.ossurl);
							that.ossurl = that.global.ossurl;
				        }
				    }
				})
			},
			nicknamChange(res){
				console.log(res);
				var that = this;
				that.nickname = res.detail.value
				
			},
			queren(){
				var that = this;
				uni.request({
					url: that.global.url+'/api/user/profile',
					method: 'POST',
					header: {
						"token": uni.getStorageSync('token')
					},
					data: {
						avatar: that.avatar,
						nickname: that.nickname
					},
					success:(res)=>{
						console.log(res);
						if(res.data.code == 1){
							console.log( that.nickname);
							that.userinfo.nickname = that.nickname
							that.userinfo.avatar = that.avatar
							uni.setStorageSync('userinfo', that.userinfo);
							that.$refs.popup.close()
						}
						
					},
				})
			},
			xiugai(){
				this.avatar = this.userinfo.avatar
				this.nickname = this.userinfo.nickname
				this.$refs.popup.open()
			},
			//选择头像
			 onChooseavatar(e) {
				 var that = this
				console.log(e.detail);
				that.avatarTr = true
				that.shangchuan(e.detail.avatarUrl)
			 },
			//上传图片
			shangImage(){
				var that = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album','camera'],//album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项	
					success:(res)=>{
						that.avatarTr = true
						that.shangchuan(res.tempFilePaths[0])
					},
				})
			},
			shangchuan(tempFilePaths){
				var that = this
				uni.uploadFile({
					url: that.global.url + '/api/common/upload',
					header: {
						"token": uni.getStorageSync('token'),
					}, //请求token	
					filePath: tempFilePaths,
					name: 'file',
					success: (res) => {
						var apiresult = JSON.parse(res.data)
						if (apiresult.code == 1) {
							console.log(apiresult.data.url);
							that.avatar = apiresult.data.url;
						} else {
							uni.showToast({
								title: apiresult.msg,
								icon:'error',
							duration: 2000
							})
						}
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon:'error',
							duration: 2000
						})
					}
				});
			},
			identitys(){
				var that = this;
				uni.request({
					url: that.global.url+'/api/User/identity',
					method: 'POST',
					header: {
						"token": uni.getStorageSync('token')
					},
					success:(res)=>{
						that.identity = res.data.data.identity
						that.userinfo.nickname = res.data.data.nickname
						that.userinfo.avatar = res.data.data.avatar
						uni.setStorageSync('userinfo', that.userinfo);
					},
				})
			},
			tiaozhuan(url){
				if(url == '/pages/wode/managementCenter' && this.identity != 1){
					return uni.showToast({title: "您没有管理员权限",icon:'none',duration: 2000})
				}
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F6F3EE;
	}
	.xia{
		height: 1rpx;
		background-color: #C3C3C3;
	}
	button{padding: 0;margin: 0;background-color: #fff;height: 120rpx;}
	button::after{ border: none; }
	.button-hover {
		color:rgba(0, 0, 0, 0.6);
		background-color:#fff;
	}
	.setting{
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 30rpx;
		right: 50rpx;
	}
	.nickname{
		width: 60%;
		text-align: right;
	}
	.nickname:after{
	  width: 60%;
	  text-align: right;
	}
</style>
